import React,{useCallback,} from 'react';
import {ScrollView, View} from "@tarojs/components";
import './ScrollNav.scss';

interface ScrollNavProps {
  toggleNavData: (index: number) => void;
  currentPage: number
  navs: string[]
}

const ScrollNav: React.FC<ScrollNavProps> = (props) => {
  const {navs, toggleNavData, currentPage} = props;
  //导航点击
  const screen = useCallback((item: String, index: number): any => {
      return (): void => {
        console.log(item);
        toggleNavData(index);
      }
    }, [toggleNavData]
  );


  return (
    <ScrollView scrollX>
      <View className='scrollNav'>
        {
          navs.map((item, index) => {
            return <View className='view' onClick={screen(item, index)}>{item}</View>
          })
        }
      </View>
      <View className='line' style={{left: currentPage * 100 + 'px'}}>
        <View className='view'></View>
      </View>
    </ScrollView>
  )
}

export default ScrollNav;
